<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>栅格布局基本用法2</title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			div{
				outline: 1px red solid;
				
			}
			.container{
				margin-top: 3rem;
			}
		</style>
	</head>
	<body>
		<!-- 12  2   10 -->
		<div class="container">
			<h1>页面顶部</h1>    
			<div class="row">
				<div class="col-1 offset-1">  logo图</div>
				<div class="col-1 offset-8">
					登录注册
				</div>
			</div>
		</div>
		
		
		
		<div class="container">
			<div class="row row-cols-xl-6 row-cols-lg-4 row-cols-md-3 row-cols-2">
				<div class="col">001</div>
				<div class="col">002</div>
				<div class="col">003</div>
				<div class="col">004</div>
				<div class="col">005</div>
				<div class="col">006</div>
				<div class="col">007</div>
				<div class="col">008</div>
				<div class="col">009</div>
				<div class="col">010</div>
				<div class="col">011</div>
				<div class="col">012</div>
				<div class="col">013</div>
				<div class="col">014</div>
				<div class="col">020</div>
				<div class="col">015</div>
				<div class="col">016</div>
				<div class="col">019</div>
				<div class="col">017</div>
				<div class="col">018</div>			
				
				<div class="col-1">021</div>
				<!-- <div class="col-1">022</div>
				<div class="col-1">023</div>
				<div class="col-1">024</div> -->
			</div>
		</div>
		
	</body>
</html>